import React, { useState } from 'react'
import { DatePicker, Button, Form, Space, Select, Modal } from 'antd'
import { FilterContainer } from '@/appComponents/Filter'
import {
  SearchOutlined,
  SwapOutlined,
  VerticalAlignBottomOutlined
} from '@ant-design/icons'
import dayjs from 'dayjs'

const Filter = ({
  onQuery,
  paramsData,
  setParamsData,
  onDataType,
  onExport,
  cutDataType,
  useTab,
  loading
}) => {
  const [formType, setFormType] = useState('YYYY-MM-DD')
  const [open, setOpen] = useState(false)
  const onQueryChange = (v, t) => {
    const st = v[0].format('YYYY-MM-DD HH:00:00')
    const et = v[1].format('YYYY-MM-DD HH:00:00')
    setParamsData((state) => {
      state.start_time = st
      state.end_time = et
      return {
        ...state
      }
    })
  }
  const click = () => {
    onQuery(paramsData)
  }
  const onChangeTimeType = (e) => {
    if (e == 3) {
      setFormType('YYYY-MM-DD')
    } else {
      setFormType('YYYY-MM-DD HH:00:00')
    }
    setParamsData((state) => {
      state.time_type = e
      return {
        ...state
      }
    })
  }
  const onChangeFiducialType = (e) => {
    if (e == 2) {
      setOpen(true)
    } else {
      setOpen(false)
      setParamsData((state) => {
        state.fiducial_start_time = -1
        state.fiducial_end_time = -1
        return {
          ...state
        }
      })
    }
    setParamsData((state) => {
      state.fiducial_type = e
      return {
        ...state
      }
    })
  }
  const onChangeFiducialTime = (v) => {
    const st = v[0].format('YYYY-MM-DD HH:00:00')
    const et = v[1].format('YYYY-MM-DD HH:00:00')
    setParamsData((state) => {
      state.fiducial_start_time = st
      state.fiducial_end_time = et
      return {
        ...state
      }
    })
  }
  const onChangeReductionType = (v) => {
    setParamsData((state) => {
      state.control_type = v
      return {
        ...state
      }
    })
  }
  return (
    <FilterContainer>
      <Form layout="inline">
        <Form.Item label="时间">
          <DatePicker.RangePicker
            showTime={formType}
            style={{ width: 255 }}
            showNow
            value={[dayjs(paramsData.start_time), dayjs(paramsData.end_time)]}
            format={formType}
            onChange={(v) => {
              onQueryChange(v)
            }}
          />
        </Form.Item>
        <Form.Item label="时间粒度">
          <Select
            style={{ width: 100 }}
            onChange={(e) => {
              onChangeTimeType(e)
            }}
            defaultValue={paramsData.time_type}
          >
            <Select.Option value={2}>小时</Select.Option>
            <Select.Option value={3}>日</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="减排类型">
          <Select
            style={{ width: 120 }}
            onChange={(e) => {
              onChangeReductionType(e)
            }}
            defaultValue={paramsData.control_type}
          >
            <Select.Option value={1}>差异化减排</Select.Option>
            <Select.Option value={2}>自主减排</Select.Option>
            <Select.Option value={3}>停产</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="基准值">
          <Select
            onChange={(e) => {
              onChangeFiducialType(e)
            }}
            defaultValue={paramsData.fiducial_type}
          >
            <Select.Option value={1}>上一日</Select.Option>
            <Select.Option value={2}>评估前</Select.Option>
          </Select>
        </Form.Item>
        {open && (
          <Form.Item>
            <DatePicker.RangePicker
              style={{ width: 255 }}
              showTime={formType}
              showNow
              format={formType}
              onChange={(v) => {
                onChangeFiducialTime(v)
              }}
            />
          </Form.Item>
        )}
        <Button
          loading={loading}
          type="primary"
          onClick={() => click()}
          icon={<SearchOutlined></SearchOutlined>}
        >
          查询
        </Button>
        {!cutDataType && (
          <Button
            type="primary"
            icon={<VerticalAlignBottomOutlined />}
            onClick={() => {
              onExport()
            }}
          >
            导出
          </Button>
        )}
        {!useTab && (
          <Button
            icon={<SwapOutlined />}
            onClick={() => {
              onDataType()
            }}
            type="primary"
          >
            切换为{cutDataType ? '表格' : '图表'}
          </Button>
        )}
      </Form>
    </FilterContainer>
  )
}

export default Filter
